<template>
  <span ref="countRef" />
</template>
<script>
import { onMounted, ref } from 'vue'
import { CountUp } from 'countup.js'
export default {
  name: 'CountUp',
  props: {
    end: {
      type: Number,
      default: 2019
    },
    decimal: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 2
    }
  },
  setup(props) {
    let numAnim = null
    const countRef = ref(null)

    onMounted(() => {
      initCountUp()
    })

    function initCountUp() {
      numAnim = new CountUp(countRef.value, props.end, {
        decimal: props.decimal,
        duration: props.duration
      })
      numAnim.start()
    }

    return {
      countRef
    }
  }
}
</script>
